<template>
  <div class="mini-chart">
    <div
      class="chart-content"
      :style="{height: 46}"
    >
      <v-chart
        :force-fit="true"
        :height="height"
        :data="dataSource"
        :padding="[36, 5, 18, 5]"
      >
        <v-tooltip />
        <v-smooth-area position="date*num" />
      </v-chart>
    </div>
  </div>
</template>

<script>
import { format } from 'date-fns'

// const beginDay = new Date().getTime()

// const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
// for (let i = 0; i < fakeY.length; i += 1) {
//   data.push({
//     x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
//     y: fakeY[i]
//   })
// }


const tooltip = [
  'date*num',
  (date, num) => ({
    name: date,
    value: num
  })
]

const scale = [{
  dataKey: 'num',
  title: '访问量',
  min:0
}, {
  dataKey: 'date',
  title: '时间',
  min:0
}]

export default {
  props: ['visitData'],
  name: 'MiniArea',
  created() {
    this.dataSource = this.visitData.map(ele => {
      ele.date = format(new Date(ele.date), 'yyyy-MM-dd');
      return ele
    })
  },
  data() {
    return {
      dataSource: [],
      scale,
      tooltip,
      height: 100
    }
  }
}
</script>

<style scoped>
.mini-chart {
  position: relative;
  width: 100%;
}
.mini-chart .chart-content {
  position: absolute;
  bottom: -28px;
  width: 100%;
}
</style>
